<template>
  <el-dialog
    v-model="dialogVisible"
    title="财务管理的概念（一）"
    width="50%"
    :before-close="handleClose"
  >
    <div class="detail-content">
      <div class="detail-item">
        <div class="item-title">知识目标</div>
        <div class="item-content">
          <el-input
            v-model="input"
            style="width: 240px"
            :rows="2"
            placeholder="知识目标"
          />
        </div>
      </div>
      <div class="detail-item">
        <div class="item-title">知识点</div>
        <div class="item-content">
          <div class="content-desc">
            <div class="desc-title">一、财务管理的概念</div>
            <div>(一)财务活动</div>
            <div>
              1,筹备(筹资渠道、方式、资本成本、资本结构及合法筹资的内容及室例)
            </div>
            <div>2.投资(投资内容的界定、投资和国家战臵、产业政策)</div>
            <div>3.经营(现金、存货、应收账款等的管理)</div>
            <div class="desc-title">二、财务管理的概念</div>
            <div>(一)财务活动</div>
            <div>
              1,筹备(筹资渠道、方式、资本成本、资本结构及合法筹资的内容及室例)
            </div>
            <div>2.投资(投资内容的界定、投资和国家战珞、产业政策)</div>
            <div>3.经营(现金、存货、应收账歌等的管理)</div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit()"> 确认修改 </el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineEmits } from "vue";
const emits = defineEmits(["close", "submit"]);
let dialogVisible = ref(true);
let input = ref("");
/**
 * 点击确认修改事件
 */
function submit() {
  emits("submit");
}
/**
 * 关闭弹窗事件
 */
function handleClose() {
  emits("close");
}
</script>

<style lang="less" scoped>
.el-dialog__header {
  border-bottom: 1px solid #e5e5e5;
}
.el-input__wrapper {
  border: none;
  box-shadow: none;
}

::v-deep(.el-input__wrapper) {
  border: none;
  box-shadow: none;
}

.detail-content {
  margin-top: 30px;
  :deep(.el-input__wrapper) {
    box-shadow: none;
  }
  .el-textarea__inner {
    border: 0;
    resize: none; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
  }
  .detail-item {
    margin-bottom: 30px;

    .item-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .item-content {
      font-size: 14px;
      color: #666666;
      border: 1px solid #e5e5e5;
      padding: 15px;

      .content-desc {
        div {
          padding: 8px 0;
        }
        .desc-title {
          color: #000;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
